Skip to main content

Maps

Adding the Map Widget​

Following the below-given steps will add the Map Widget to your website.

Get Started​

Step 1: Add the following HTML tag into the body section of your Web App code to add the Map Widget.

<vdz-mashup-map class="map" data-widget="true"></vdz-mashup-map>

Note: Make sure data-widget is set to true as this applies the VIDIZMO default styling to the widget.

Step 2: Following are few sample events against this Map widget that can be added into the body section of your web application. More events can be found below in the table.

document.querySelector(".map").addEventListener('on-download', (evt) => {
});

Events​

Event NameEvent DataScenario
on-downloadnumberWhen the mashup map download starts, this event will be raised.

Sample Code​

<html>
    <head>
        <meta charset="UTF-8" />

        <!-- VIDIZMO Imports -->
        <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js">
        </script>
        <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
        <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js">
        </script>
    </head>
    <body>
        <vdz-mashup-map class="map" data-widget='true' mashup-id={mashup - id}></vdz-mashup-map>
        <script>
            document.querySelector("map").addEventListener("on-download", (event) => {
            });
        </script>
    </body>
</html>